<template>
	<view class="collection">
		<navBar isBack title="线下收款" backColor="#fff" color="#fff" background="transparent"></navBar>
		<view class="topImg">
			<image :src="`${baseImg}/static/adminShop/colleBg.png`" mode=""></image>
			<view class="priceBox">
				<template v-if="shopInfo.is_many_way==1">
					<span v-if="shopInfo.deposit_status==0 && shopInfo.balance_status==0">￥{{shopInfo.deposit_price}}</span>
					<span v-if="shopInfo.deposit_status==1 && shopInfo.balance_status==0">￥{{shopInfo.balance_price}}</span>
				</template>
				<template v-else>
					<span>￥{{shopInfo.price}}</span>
				</template>
				<view class="userBox">
					<image :src="shopInfo.headimg" mode=""></image>
					{{shopInfo.username}}的待支付订单
				</view>
			</view>
			<view class="shopBox">
				<view class="shopList">
					<view class="item" v-for="(item,index) in shopInfo.order" :key="index">
						<view class="storeTit">
							<image :src="item.store_logo" mode=""></image>
							{{item.store_name}}
						</view>
						<view class="shopItem" v-for="(item1,index1) in item.detail_lst" :key="index1">
							<image :src="item1.main_imgurl" mode=""></image>
							<view class="shopInfo">
								<view class="top">
									{{item1.product_title}}
									<view class="spec">
										<span v-for="(item2,index2) in item1.attribute">{{item2.value}}/</span>
									</view>
								</view>
								<view class="bottom">
									<view class="price">
										￥{{item1.price}}
										<span>￥{{item.primary_price}}</span>
									</view>
									<view class="num">x{{item1.num}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="price_box">
						<view class="allPrice">
							总价：¥{{shopInfo.primary_price}}
							<view class="desPrice" v-if="shopInfo.is_many_way==1 && shopInfo.deposit_status==0">
								定金：<span>¥{{shopInfo.deposit_price}}</span>
							</view>
							<view class="desPrice" v-if="shopInfo.is_many_way==1 && shopInfo.balance_status==0">
								尾款：<span>¥{{shopInfo.balance_price}}</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<button type="default" @click="toSubmit">确认已收款</button>
		</view>
	</view>
</template>

<script>
	import service_rootAdmin from '@/service/rootAdmin.js'
	export default{
		data(){
			return{
				baseImg:this.$static,
				shopInfo:{},
				verificationCode:null, //扫描二维码获取的参数
				order_codes:null,
				type:'',
				order_no:''
			}
		},
		onLoad(options) {
			console.log(options,'参数')
			this.type = options.type?options.type:'';
			if(this.type=='shop'){
				let data = JSON.parse(decodeURIComponent(options.data))
				console.log(data,'data')
				this.order_no = data.order_no?data.order_no:'';
				this.verificationCode = data.verificationCode?data.verificationCode:null;
			}else{
				this.verificationCode = options.verificationCode?options.verificationCode:null
			}
			if(this.verificationCode){
				this.getOrderId()
			}
		},
		methods:{
			// 获取订单id与订单类型
			getOrderId(){
				service_rootAdmin.getOrderId({verificationCode:this.verificationCode}).then(res=>{
					console.log(res,'订单信息')
					if(res.code==1){
						this.order_codes = res.data.relation_order_no
						if(this.type=='shop'){
							if(this.order_no != res.data.relation_order_no){
								uni.showToast({
									title:'订单不一致！',
									icon:'none'
								})
								setTimeout(function(){
									uni.navigateBack({
										delta:1
									})
								},1000)
								return
							}
						}
						if(res.data.type=='product_order'){
							this.getShopList()
						}else if(res.data.type == 'pack_order'){
							this.getShopPackage()
						}
					}
				})
			},
			
			// 普通产品信息
			getShopList(){
				let params ={
					order_codes:this.order_codes
				}
				service_rootAdmin.getShopList(params).then(res=>{
					console.log(res,'普通商品信息列表')
					if(res.code==1){
						this.shopInfo = res.data?res.data:{}
					}
				})
			},
			// 产品包信息
			getShopPackage(){
				let params = {
					order_codes:this.order_codes
				}
				service_rootAdmin.getShopPackage(params).then(res=>{
					console.log(res,'产品包商品信息列表')
					if(res.code==1){
						this.shopInfo = res.data?res.data:{}
					}
				})
			},
			
			// 确认收款按钮
			toSubmit(){
				uni.showModal({
					content:'确认已收款吗？',
					success:res=>{
						if(res.confirm){
							service_rootAdmin.toCollecOk({verificationCode:this.verificationCode}).then(res=>{
								console.log(res,'确认收款结果')
								if(res.code==1){
									uni.showToast({
										title:'已确认收款',
										icon:'success'
									})
									setTimeout(function(){
										uni.navigateBack({delta:1})
									},500)
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.collection{
		.topImg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 528rpx;
			image{
				width: 100%;
				height: 100%;
			}
			.priceBox{
				display: flex;
				flex-direction: column;
				align-items: center;
				font:600 60rpx/80rpx PingFang SC;
				color: #EFB82F;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%);
				.userBox{
					display: flex;
					align-items: center;
					image{
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						border: 1rpx solid #fff;
						margin-right: 16rpx;
					}
					font:400 22rpx/30rpx PingFang SC;
					color: #FFFFFF;
				}
			}
			.shopBox{
				width: 100%;
				position: absolute;
				left: 0;
				top:424rpx;
				.shopList{
					margin: 0 auto;
					padding: 30rpx;
					width: 702rpx;
					border-radius: 16rpx;
					background-color: #fff;
					.item{
						.storeTit{
							display: flex;
							align-items: center;
							font: 500 26rpx/40rpx PingFang SC;
							color: #0A0605;
							image{
								width: 36rpx;
								height: 36rpx;
								margin-right: 16rpx;
							}
						}
						.shopItem{
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 36rpx;
							image{
								width: 132rpx;
								height: 132rpx;
								flex-shrink: 0;
								border-radius: 4rpx;
								margin-right: 20rpx;
							}
							.shopInfo{
								width: 100%;
								.top{
									font: 400 22rpx/36rpx PingFang SC;
									color: #0A0605;
									.spec{
										font: 400 18rpx/32rpx PingFang SC;
										color: #A0A0A0;
									}
								}
								.bottom{
									width: 100%;
									display: flex;
									margin-top: 32rpx;
									align-items: center;
									justify-content: space-between;
									.price{
										font: 500 24rpx/36rpx PingFang SC;
										color: #E9423E;
										span{
											margin-left: 8rpx;
											font: 400 18rpx/32rpx PingFang SC;
											color: #A0A0A0;
											text-decoration: line-through;
										}
									}
								}
							}
						}
					}
					.price_box{
						display: flex;
						justify-content: flex-end;
						margin-top: 68rpx;
						.allPrice{
							display: flex;
							align-items: center;
							font: 400 22rpx/36rpx PingFang SC;
							color: #A0A0A0;
							.desPrice{
								margin-left: 28rpx;
								font: 500 24rpx/36rpx PingFang SC;
								color: #0A0605;
								span{color: #E9423E;}
							}
						}
					}
				}
			}
		}
		.btn{
			width: 100%;
			height: 120rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			height: calc(120rpx+ constant(safe-area-inset-bottom));			height: calc(120rpx + env(safe-area-inset-bottom));			padding-bottom: constant(safe-area-inset-bottom);			padding-bottom: env(safe-area-inset-bottom);
			button{
				width: 372rpx;
				height: 80rpx;
				margin:20rpx auto;
				border-radius: 46rpx;
				color: #fff;
				font: 500 32rpx/80rpx PingFang SC;
				background: linear-gradient(86deg, #DBA954 0%, #EABA6A 100%);
				box-shadow: 0px 6rpx 12rpx rgba(219, 169, 84, 0.3);
			}
		}
	}
</style>
